import React from 'react';
import Notification from 'rc-notification';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router';

import * as Util from '../../common/Util';
import Notify from '../../common/Notification';
import * as LoginActions from '../../actions/LoginActions';
import * as DeviceActions from '../../actions/DeviceActions';

import {
  Input,
  Button
} from 'react-bootstrap';

import * as Shell from '../../common/Shell';
import Container from '../../components/Container';

class LoginApp extends React.Component {

  constructor () {
    super();  
  }

  static propTypes = {
    user: React.PropTypes.array.isRequired,
    dispatch: React.PropTypes.func.isRequired
  }

  handleSubmitClick() {
    let phone = this.refs.phone.getValue();
    let password = this.refs.password.getValue();


    if (phone === "") {
      Notify.makeNotify("手机号码不能为空");
      return;
    }

    phone = phone.replace(/\s/g, "");

    if(!Util.phoneValidate(phone)){
      Notify.makeNotify("手机号码格式不正确");
      return;
    }

    if(!Util.passwordValidate(password)){
      Notify.makeNotify("密码格式不正确");
      return;
    }

    password = Util.RSAEncrypt(password);
    this.props.loginAction.login({phone, password});
  }

  onGetDeviceInfoSuccess(data){
    if(data){
      this.props.deviceAction.saveDevice(data);
    }
  }

  onSaveUserInfoSuccess(data){
      //继续获取设备信息
      Shell.callShellMethod(
        "getOsVersionPlugin", 
        this.onGetDeviceInfoSuccess.bind(this)
      );
  }
  
  componentDidUpdate(){

    let { login_status = 0, message = "", phone = "", password = "", khid = "" } = this.props.login;
    
    this.props.login.login_status = 0;

    if(login_status === -1){
        Notify.makeNotify(message);
    }else if(login_status === 1){

      let saveUserInfo = {
        khId : khid,
        phoneNo: phone,
        loginPw: password
      };

      //保存用户登录凭据
      Shell.callShellMethod(
        "saveUserInfoPlugin", 
        this.onSaveUserInfoSuccess.bind(this), 
        null, 
        saveUserInfo
      );

      this.props.history.pushState(null, "/Product");
    }
  }

  getInitPhone(){
    let queryData = this.props.location.query.phone;
  }

  render() {

    let findPwdLink = <Link to="/FindPwd">忘记密码？</Link>;
    let wxProfileLink = <Link to="/WxUpgrade" className="border-bottom">我已在微信注册</Link>

    return (
          <Container 
            isGoBack={true} 
            isFooter={false}
            isHeader={true}
            isAuth = {false}
            headerTitle={"登录"} >
              <div className="blank30"></div>
              <div id="account-panel">
                  <form className="form-horizontal">
                    <div className="form-element">
                      <Input type="tel" 
                        ref = "phone"
                        defaultValue = {this.props.location.query.phone||""}
                        maxLength = "11"
                        placeholder = "请输入手机号码"
                        wrapperClassName="col-xs-12" 
                        addonBefore="手机号"/>
                      <div className="devider"></div>
                      <Input type="password" 
                        ref = "password"
                        defaultValue=""
                        placeholder = "请输入密码" 
                        maxLength = "16"
                        wrapperClassName="col-xs-12"
                        addonAfter = {findPwdLink}
                        addonBefore="密&nbsp;&nbsp;&nbsp;码"/>
                    </div>

                    <div className="text-center padding-left-lg padding-right-lg">
                      <Button bsStyle="primary" block onClick={this.handleSubmitClick.bind(this)}>
                          登录
                      </Button>  
                    </div>

                    <div className="blank20"></div>

                    <div className="text-center">
                      { wxProfileLink }
                    </div>
                  </form>
              </div>
          </Container>
    );
  }
}

export default connect(state => ({
    login: state.login,
    device : state.device
}), dispatch => ({
    loginAction: bindActionCreators(LoginActions, dispatch),
    deviceAction : bindActionCreators(DeviceActions, dispatch)
}))(LoginApp);
